

<title>角色列表</title>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>系统管理</cite></a>
    <a><cite>角色列表</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <blockquote class="layui-elem-quote quoteBox">
          <form class="layui-form">
            <div class="layui-inline">
              <div class="layui-input-inline">
                <input type="text" class="layui-input " placeholder="请输入搜索的内容" />
              </div>
              <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
            <div class="layui-inline">
              <a class="layui-btn layui-btn-normal">添加角色</a>
            </div>
            <div class="layui-inline">
              <a class="layui-btn layui-btn-danger layui-btn-normal ">批量删除</a>
            </div>
          </form>
        </blockquote>

        <div class="layui-card-body">
          <table class="layui-hide" id="test-table-form"></table>

          <script type="text/html" id="test-table-checkboxTpl">

          </script>

        </div>
      </div>
    </div>
  </div>
</div>

<script>
    layui.use(['admin', 'table', 'form'], function(){
        var table = layui.table
            ,form = layui.form
            ,$ = layui.$;
        table.render({
            elem: '#test-table-form'
            ,url:'/sys/role/list'
            ,where: {
                token: layui.data('layuiAdmin').token
            }
            ,cellMinWidth: 80
            ,cols: [[
                {type:'numbers'}
                ,{type: 'checkbox'}
                ,{field:'roleId', title:'ID', width:100, unresize: true, sort: true}
                ,{field:'roleName', title:'角色名'}
                ,{field:'createTime', title:'创建时间'}
            ]]
            ,page: true
        });
        //监听锁定操作
        form.on('checkbox(test-table-lockDemo)', function(obj){
            var json = JSON.parse(decodeURIComponent($(this).data('json')));
            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);

            json = table.clearCacheKey(json);
            console.log(json); //当前行数据
        });

    });
</script>